<template>
  <view class="nPicker">
    <view class="textarea vertical-shadow mb20">
      <view class="label">{{ param.label }}</view>
      <view class="popup-picker" @click="changePicker">
        <view class="inner-picker">请选择</view>
        <image class="arrow" mode="aspectFit" src="../../static/img/icon/arrow-down-2.png"></image>
      </view>
    </view>
    <view class="my-picker-view" v-show="isShow">
      <uni-transition mode-class="slide-bottom" :show="isShow"
        :styles="{ 'width': '100%', 'height': '100vh', 'position': 'fixed', 'bottom': '0' }">
        <view class="empty-box" @click="handleCancel"></view>
        <view class="picker-box">
          <view class="picker-top">
            <view class="cancel" @click="handleCancel">取消</view>
            <view class="title">{{ param.label }}</view>
            <view class="submit" @click="handleSubmit">确定</view>
          </view>
          <picker-view :value="pickerValue" indicator-class="indicator" @change="handleChange" @pickstart="pickstart"
            @pickend="pickend" :immediate-change="true">
            <block v-if="param.mode == 'selector'">
              <picker-view-column class="picker-content">
                <view class="picker-item" v-for="(item, index) in param.option" :key="index">{{ item[param.param] }}
                </view>
              </picker-view-column>
            </block>
            <block v-else>
              <picker-view-column class="picker-content" v-for="(v, i) in param.option" :key="i">
                <view class="picker-item" v-for="(item, index) in v" :key="index">{{ item }}</view>
              </picker-view-column>
            </block>
          </picker-view>
        </view>
      </uni-transition>
    </view>
  </view>
</template>

<script>
export default {
  name: "nPicker",
  components: {},
  props: {
    param: {
      type: Object,
      default: () => ({}),
    },
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      defaultValue: "请选择",
      pickType: ['date', 'time', 'region'],
      isShow: false,
      pickerValue: [0],
      isScroll: false
    };
  },
  computed: {},
  watch: {},
  created() { },
  onLoad(d) { },
  onShow() { },
  methods: {
    changePicker() {
      this.isShow = !this.isShow
    },
    handleSubmit() {
      if (!this.isScroll) {
        this.$emit('input', false);
        this.$emit("change", this.options[this.pickerValue[0]]);
      }
    },
    handleCancel() {
      this.isScroll = false;
      this.isShow = false;
    },
    handleChange(e) {
      this.pickerValue = e.detail.value;
    },
    pickstart(e) {
      this.isScroll = true;
    },
    pickend(e) {
      this.isScroll = false;
    }
  },
};
</script>
<style lang="less" scoped>
.textarea {
  background: #fff;
  padding: 30upx 40upx;

  .label {
    margin-bottom: 20upx;
    color: #888990;
  }
}

.popup-picker {
  position: relative;
  padding: 0 28upx;
  height: 80upx;
  line-height: 80upx;
  font-size: 30upx;
  color: #AAAAAA;
  background: #FFFFFF;
  border-radius: 8upx;
  border: 1upx solid #DDDDDD;

  .txt {
    padding-right: 30upx;
    color: #1d256e;

    &.default {
      color: #888990;
    }
  }

  .arrow {
    z-index: 3;
    position: absolute;
    top: 50%;
    right: 24upx;
    transform: translate(0, -50%);
    width: 24upx;
    height: 24upx;
  }
}

.my-picker-view {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);

  .empty-box {
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .picker-box {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;

    .picker-top {
      height: 120rpx;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #FFFFFF;
      border-radius: 40rpx 40rpx 0 0;

      .cancel,
      .submit {
        width: 132rpx;
        font-size: 28rpx;
        color: #040405;
        text-align: center;
      }

      .submit {
        color: #3973B5;
      }

      .title {
        width: calc(~"100% - 300rpx");
        text-align: center;
        color: #040405;
        font-weight: bold;
        font-size: 36rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    /deep/ picker-view {
      background-color: #FFFFFF;
      height: calc(~"100% - 120rpx");

      .picker-item {
        height: 96rpx !important;
        line-height: 96rpx !important;
        text-align: center;
      }

      .indicator {
        height: 96rpx;
      }
    }
  }
}
</style>
